<script setup>
  import {ref} from 'vue'
  import { User, Lock } from '@element-plus/icons-vue';
  import {userLoginService} from '@/api/user'
  import {useUserStore} from '@/stores'
  import {useRouter} from 'vue-router'
  import {getMsgCode} from '@/api/user'
  const router = useRouter()
  const userStore = useUserStore()
  const loginRef  = ref()
  const second = ref(6)
  const totalSecond = ref(6)
  const timer = ref(null)
  const isRegister = ref(true)
  const isBoolean = ref(false)
  const formModel = ref({
    phone:'',
    inpcode:''
  })
  const rule = {
    phone:[
      {required:true,message:'请输入手机号',trigger:'blur'},
      {pattern:/^1\d{10}$/,message:'输入11位数字',trigger:'blur'},
    ]

  }
  const  getcode = async () => {
    if(!timer.value && second.value === totalSecond.value){
      isBoolean.value = true //禁用按钮
      await getMsgCode(formModel.value.phone)
      ElMessage.success('验证码发送成功,请注意查收')
      timer.value = setInterval(() => {
        second.value --
        if(second.value <= 0){
          clearInterval(timer.value)
          // 重置定时器id
          timer.value = null
          second.value = totalSecond.value
          isBoolean.value = false; // 恢复按钮可用

        }
      },1000)
    }
  }
  const formLogin = ref({
    username:'',
    password:'',
    repassword:''
  })
  const rules = {
    username:[
      {required:true,message:'请输入用户名',trigger:'blur'},
      {min:5,max:10,message:'用户名长度在5到10个字符',trigger:'blur'}
    ],
    password:[
      {required:true,message:'请输入密码',trigger:'blur'},
      {min:6,max:12,message:'密码长度在6到12个字符',trigger:'blur'},
    ],
    repassword:[
      {required:true,message:'请再次输入密码',trigger:'blur'},
      {pattern:/^\S{6,15}$/,message:'密码至少6个字符，最多15个字符，且不能出现空格',trigger:'blur'},
      {
        validator:(rule,value,callback) =>{
          if(value != formLogin.value.password){
            callback('两次输入的密码不一致')
          }else{
            callback()
          }
        },
        trigger:'blur'
      }
    ]

  }
  const login = async() => {
    await loginRef.value.validate()
    const res = await userLoginService (loginRef.value)
    userStore.setToken(res.data.token)
    ElMessage.success('登录成功')
    router.push('/layout')

  }
</script>
<template>
  <div class="login">
    <!-- 密码登录 -->
    <el-card  class="card" shadow="always" v-if="isRegister">
      <el-form :model="formLogin" :rules="rules" ref="loginRef" >
        <h3>密码登录</h3>
        <el-form-item prop="username">
          <el-input placeholder="请输入用户名" v-model="formLogin.username" :prefix-icon="User"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="请输入密码" v-model="formLogin.password" :prefix-icon="Lock" type="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="flex">
            <el-checkbox>记住我</el-checkbox>
            <el-link type="primary" :underline="false" @click="isRegister = false">手机号登录</el-link>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="margin:0 auto;width:300px" @click="login()">登录</el-button>
        </el-form-item>
        <el-form-item>
        <div class="btnl"></div>
        <el-link type="primary" @click="router.push('/register')">注册</el-link>
      </el-form-item>
      </el-form>
    </el-card>
    <!-- 手机号登录 -->
    <el-card class="card" shadow="always" v-else>
      <el-form  isRegister="true" :model="formModel" :rules="rule">
      <h3>手机号登录</h3>
      <el-form-item prop="phone">
        <el-input v-model="formModel.phone" placeholder="请输入手机号" type="text"></el-input>
      </el-form-item>
      <el-form-item prop="inpcode">
        <div class="inp">
          <el-input class="left" v-model="formModel.inpcode" placeholder="请输入验证码" type="text"></el-input>
          <el-button class='right' :text="plain" @click="getcode" :disabled="isBoolean">{{ second === totalSecond ? '获取验证码' : second + '秒后重新发送'}}</el-button>
        </div>
      </el-form-item>
      <el-form-item>
        <div class="flex">
          <el-checkbox>记住我</el-checkbox>
          <el-link type="primary" :underline="false" @click="isRegister = true">密码登录</el-link>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="margin:0 auto;width:300px" @click="login()">登录</el-button>
      </el-form-item>
      <el-form-item>
        <div class="btnl"></div>
        <el-link type="primary" @click="router.push('/register')">注册</el-link>
      </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>
<style lang="scss" scoped>
  .login{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .card{
      position: absolute;
      top: 600px;
      left: 50%;
      transform: translate(-50%,-50%);
      .inp{
        display: flex;
        .left{
        flex:1;
        border-right:0 ;
      }
       .right{
         border-left: 0;
       }
      }
      .btnl{
        flex:1;
      }


    }

    h3 {
      text-align: center;
    }
    .flex{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  }

</style>
